<template>
  <transition>
    <div class="app-insurance-quote">
    <div class="app-main">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item,index) in slidebox" :key="index">
          <img :src="item.thumb">
        </mt-swipe-item>
      </mt-swipe>
      <div class="module-info">
        <ul class="details-tab-button">
          <li v-for="(item,index) in infoType" class="item" :class="{active:currentType==index}" @click="handleChange(item,index)">{{item.name}}</li>
        </ul>
        <div class="tab-body">
          <mt-field v-if="currentType==0" label="车牌号" placeholder="请输入车牌号" v-model="post.carNo"></mt-field>
          <mt-field v-if="currentType==1" label="车架号" placeholder="请输入车架号" v-model="post.carVin"></mt-field>
          <mt-field v-if="currentType==1" label="发动机号" placeholder="请输入发动机号" v-model="post.engineNo"></mt-field>
          <mt-field label="投保地区" placeholder="请输入投保地区" v-model="post.address"></mt-field>

        </div>

        <mt-radio
          class="select-insurance"
          title="选择保险公司产品"
          v-model="value"
          :options="options">
        </mt-radio>
      </div>
      <div class="button-content-bottom">
      <mt-button type="primary" @click.native="handleToNext">下一步</mt-button>
      </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import { Swipe, SwipeItem} from 'mint-ui';
export default {
  data () {
    return {
      value:'',
      options:[
        {
          label: '中国人保车险',
          value: '1',
          tips:'2222'
        },{
          label: '中国平安车险',
          value: '2',
          tips:'33333'
        },{
          label: '太平洋汽车保险',
          value: '3',
          tips:'33333'
        },{
          label: '鼎和保险',
          value: '4',
          tips:'33333'
        },
      ],
      slidebox:[
        {
          id:1,
          thumb:'static/img/img-baoxian.jpg'
        },
      ],
      currentType:0,
      infoType:[{
        name:'车牌号'
      },{
        name:'暂未上牌'
      }],
      post:{
        carNo:'',
        carVin:'',
        engineNo:'',
        address:'',
      }
    }
  },
  computed:{
  },
  watch:{
  },
  mounted(){},
  methods:{

    handleChange(item, index){
      this.currentType = index;
    },
    handleToNext(){
      this.$router.push({path:'/insurance-plan'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .app-insurance-quote .app-main{
    padding:0 0 62px;
  }
  .app-insurance-quote .mint-swipe{
    height:200px;
    text-align: center;
  }
  .app-insurance-quote .mint-swipe img{
    width: 100%;
    height: 100%;
  }
  .app-insurance-quote .details-tab-button{
    background: #fff;
    display: flex;
    overflow: hidden;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.02);
  }
  .app-insurance-quote .details-tab-button .item{
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: center;
    padding:12px 0;
    font-size:15px;
  }
  .app-insurance-quote .details-tab-button .item.active{
    border-bottom: 1px solid #007EE5;
    color: #007EE5;
  }
  .app-insurance-quote .select-insurance .mint-radiolist-title{
    margin: 0;
    padding:16px 0;
    font-size: 15px;
    color: #007EE5;
    text-align: center;
  }
  .app-insurance-quote .select-insurance .mint-cell{
    /*padding:12px 0;*/
    min-height:70px
  }
  .app-insurance-quote .select-insurance .mint-radiolist-title:before,.app-insurance-quote .select-insurance .mint-radiolist-title:after{
    background: #007EE5;
    content: '';
    width:52px;
    height: 1px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }
  .app-insurance-quote .select-insurance .mint-radiolist-title:after{
    margin-right: 0;
    margin-left: 10px;
  }
  .app-insurance-quote .button-content-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    display: flex;
    box-shadow: 0px -6px 4px 0px rgba(0, 0, 0, 0.03);
  }
  .app-insurance-quote .button-content-bottom .mint-button{
    display: flex;
    flex: 1;
    border-radius: 0;
    justify-content: center;
    font-size: 16px;
    box-shadow: none;
    height: 50px;

  }
</style>
